<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script type="text/javascript">
	function checkForm(){
		var userName=document.getElementById("userName").value;
		var password=document.getElementById("password").value;
		var rPassword=document.getElementById("rPassword").value;
		var buildId=document.getElementById("buildId").value;
		var roomId=document.getElementById("roomId").value;
		var name=document.getElementById("name").value;
		var sex=document.getElementById("sex").value;
		var tel=document.getElementById("tel").value;
		if(userName==""||password==""||rPassword==""||name==""||sex==""||tel==""||buildId==""||roomId==""){
			document.getElementById("error").innerHTML="信息填写不完整！";
			return false;
		} else if(password!==rPassword){
			document.getElementById("error").innerHTML="密码填写不一致！";
			return false;
		}else {
			var reg= /^1[3|4|5|7|8][0-9]{9}$/;
			if(!reg.test(tel)){
				document.getElementById("error").innerHTML="请输入正确的手机号";
				return false;
			}
			return true;
		}
	}
	
	$(document).ready(function(){
		$("ul li:eq(1)").addClass("active");

		$('#buildId').change(function() {
			const selectedBuildId = $(this).val();
			$.ajax({
				url: "exchange",
				method: 'GET',
				data: { buildId: selectedBuildId ,action:"getRoomListByBuildId"},
				success: function(data) {
					$('#roomId').empty(); // 清空宿舍号下拉框
					console.log(data);
					$.each(data.roomList, function(index, room) {
						console.log(data)
						$('#roomId').append('<option value="' + room.id + '">' + room.num + '</option>');
					});
				},
				error: function(error) {
					console.error('Error:', error);
				}
			});
		});
		// 页面加载时触发选择事件以根据选定的建筑加载房间信息
		$('#buildId').change();
	});
</script>
<div class="data_list">
		<div class="data_list_title">
		<c:choose>
			<c:when test="${student.id!=null }">
				修改学生信息
			</c:when>
			<c:otherwise>
				添加学生
			</c:otherwise>
		</c:choose>
		</div>
		<form action="user?action=save" method="post" onsubmit="return checkForm()">
			<div class="data_form" >
				<input type="hidden" id="studentId" name="studentId" value="${student.id }"/>
					<table align="center">
						<tr>
							<td><font color="red">*</font>姓名：</td>
							<td><input type="text" id="name"  name="name" value="${student.name }"  style="margin-top:5px;height:30px;" /></td>
						</tr>
						<tr>
							<td><font color="red">*</font>性别：</td>
							<td>
								<select id="sex" name="sex" style="width: 150px;">
									<option value="">请选择...</option>
									<option value="男" ${student.sex eq "男"?'selected':'' }>男</option>
									<option value="女" ${student.sex eq "女"?'selected':'' }>女</option>
								</select>
							</td>
						</tr>
						<tr>
							<td><font color="red">*</font>学号：</td>
							<td><input type="text" id="num"  name="num" value="${student.num }"  style="margin-top:5px;height:30px;" /></td>
						</tr>
						<tr>
							<td><font color="red">*</font>楼栋号：</td>
							<td>
								<select id="buildId" name="buildId" style="width:150px;height: 30px;">
									<c:forEach var="build" items="${buildList}">
										<option value="${build.id }" ${student.buildId==build.id?'selected':'' }>${build.name }</option>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td><font color="red">*</font>宿舍号：</td>
							<td>
								<select id="roomId" name="roomId" style="width:150px;height: 30px;">
									<c:forEach var="room" items="${roomList}">
										<option value="${room.id}" ${student.buildId==room.id?'selected':''}>${room.num}</option>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td><font color="red">*</font>密码：</td>
							<td><input type="password" id="password"  name="password" value="${student.password }"  style="margin-top:5px;height:30px;" /></td>
						</tr>
						<tr>
							<td><font color="red">*</font>重复密码：</td>
							<td><input type="password" id="rPassword"  name="rPassword" value="${student.password }"  style="margin-top:5px;height:30px;" /></td>
						</tr>
						<tr>
							<td><font color="red">*</font>联系电话：</td>
							<td><input type="text" id="tel"  name="tel" value="${student.tel }"  style="margin-top:5px;height:30px;" /></td>
						</tr>
					</table>
					<div align="center">
						<input type="submit" class="btn btn-primary" value="保存"/>
						&nbsp;<button class="btn btn-primary" type="button" onclick="javascript:window.location='user'">返回</button>
					</div>
					<div align="center">
						<font id="error" color="red">${error }</font>
					</div>
			</div>
		</form>
</div>